<template>
	<div class="esbTop10">
		<el-table :data="list" size="mini"  :show-header="false" style="width: 100%">
			<el-table-column type="index" align="center" width="45">
				<template slot-scope="scope">
				      <div :class="['tup','tup'+(scope.$index+1)]" style="font-weight: bold;">
						<i v-if="scope.$index<3" class="iconfont icon-jiangzhang"></i>
					    <div>{{scope.$index+1}}</div>
					 
					  </div>
				</template>  
			</el-table-column>
			
			<el-table-column prop="name" label="系统名称1"   align="left">
			</el-table-column>
		
			<el-table-column prop="value" label="服务数" width="60"  align="left" >
				<template slot-scope="scope">
				      <span style="color:#888888;font-size:12px">{{scope.row.value}}</span>
				</template> 
			</el-table-column>
			</el-table>
	</div>
</template>

<script>
	"use strict";
	import {selectEsbTop} from '@/api/service.js';
	export default {
		data() {
			return {
				list:[
					// {systemName:'综合前端',serviceNum:'1504'},
					// {systemName:'ATM',serviceNum:'1500'},
					// {systemName:'移动营销',serviceNum:'1200'},
					// {systemName:'安卓手机银行',serviceNum:'1105'},
					// {systemName:'网上银行',serviceNum:'1000'},
					// {systemName:'苹果手机银行',serviceNum:'892'},
					// {systemName:'短信平台',serviceNum:'762'},
					// {systemName:'微信银行',serviceNum:'622'},
					// {systemName:'核心业务系统',serviceNum:'585'},
					// {systemName:'ECIF',serviceNum:'200'},
				],
				
				
			};
		},

		created() {
			this.getList();
		},
		methods: {
			getList() {
				selectEsbTop().then(response => {
					this.list = response.data.extend
				}).catch(error => {
					console.info("失败");
					console.info(error.message);
				});
			},
		},
	}
</script>

<style>
	.esbTop10{
	padding-top: 1px;	
	}
	.esbTop10 .el-table{
		border-width: 0;
	}
	.esbTop10 .el-table .cell{
		line-height: 31px;
	}
	.esbTop10 .el-table--mini .el-table__cell{
		padding: 0px 0;
	}
	
	.esbTop10 .el-table td.el-table__cell, .esbTop10 .el-table th.el-table__cell.is-leaf{
		border-bottom: 1px dashed #E8EAEC;
	}
	.el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
  border-right: 1px solid #EBEEF5;
}
	
	.tup{
		background-size: 100% 100%;
		height: 30px;
		width:30px;
		display: block;
	}
	
	.tup1 i{
		color:#FB2A2C;
		font-size:21px;
	}
	
	.tup2 i{
		color:#FD6900;
		font-size:21px;
	}
	
	.tup3 i{
		color:#FBA800;
		font-size:21px;
	}
	
	
	.tup1 div,.tup2 div,.tup3 div{
		display: inline-block;
		margin-left: -14px;
		font-size:12px;
		color:#FFF;
		vertical-align: top;
		margin-top: -4px;
	}
	
</style>